<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="ruleForm"
				:rules="formRules"
				label-width="80px"
				label-suffix=":"
				:inline="true"
				class="demo-ruleForm"
			>
				<el-form-item
					:label="$t('common.belong_merchant')"
					prop="merchantId"
				>
					<merchant-select
						v-model="ruleForm.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item label="查询时间">
					<el-date-picker
						v-model="queryTime"
						type="daterange"
						range-separator="-"
						:start-placeholder="
							$t('dxn.card_ables_list.start_time')
						"
						:end-placeholder="$t('dxn.card_ables_list.end_time')"
						format="yyyy-MM-dd"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
						style="width: 360px"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="会员账号">
					<el-form-item prop="userName" style="margin-right: 0px;">
						<el-input
							v-model.trim="ruleForm.userName"
							v-input="{ name: 'noEmpty' }"
							clearable
							style="width: 160px"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<span>&</span>
					<el-form-item prop="deskmateUserName">
						<el-input
							v-model.trim="ruleForm.deskmateUserName"
							v-input="{ name: 'noEmpty' }"
							clearable
							style="width: 160px"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						@click="handleReset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
			<div v-loading="loading" element-loading-spinner="el-icon-loading">
				<PartnerCardDetail
					:dataCount="detailData.dataCount"
					:dataList="detailData.dataList"
					:isShowAction="false"
				/>
			</div>
		</template>
		<template slot="content">
			<div style="position: absolute;right: 30px;z-index: 9;">
				<el-button
					v-if="hasPermission('90570049')"
					type="warning"
					icon="el-icon-download"
					size="small"
					:disabled="loading || exportLoading"
					:loading="exportLoading"
					@click="handleExport"
				>
					{{ $t('dxn.card_ables_list.export_excel') }}
				</el-button>
			</div>
			<el-tabs v-model="activeName">
				<el-tab-pane label="单挑手牌信息" name="1">
					<HandCard
						v-if="activeName === '1'"
						:type="1"
						:params="params"
						:tableHeight="tableHeight"
					/>
				</el-tab-pane>
				<el-tab-pane label="同桌手牌信息" name="2">
					<HandCard
						v-if="activeName === '2'"
						:type="2"
						:params="params"
						:tableHeight="tableHeight"
					/>
				</el-tab-pane>
				<el-tab-pane label="相同设备信息" name="3">
					<SameDevice
						v-if="activeName === '3'"
						:params="params"
						:tableHeight="tableHeight"
					/>
				</el-tab-pane>
				<el-tab-pane label="相同IP信息" name="4">
					<SameIp
						v-if="activeName === '4'"
						:params="params"
						:tableHeight="tableHeight"
					/>
				</el-tab-pane>
			</el-tabs>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import PartnerCardDetail from '@/views/dxn/riskManager/components/partnerCardDetail'
import HandCard from './components/handCard'
import SameDevice from './components/sameDevice'
import SameIp from './components/sameIp'
const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')
export default {
	name: routerNames.partnerCardQuery,
	components: {
		MainContent,
		PartnerCardDetail,
		HandCard,
		SameDevice,
		SameIp
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: ['reviewTab'],
			activeName: '1',
			exportLoading: false,
			detailData: {
				dataCount: {},
				dataList: []
			},
			loading: false,
			ruleForm: {
				merchantId: undefined,
				userName: '',
				deskmateUserName: ''
			},
			queryTime: [start(), end()],
			placeDatas: [],
			params: {},
			exportApiMap: new Map([
				['1', 'exportPartnerQueryOneChoiceBend'], // 单挑手牌信息
				['2', 'exportPartnerQuerySameTableBend'], // 同桌手牌信息
				['3', 'exportPartnerQuerySameDeviceBend'], // 相同设备信息
				['4', 'exportPartnerQuerySameIpBend'] // 相同IP信息
			])
		}
	},
	computed: {
		formRules() {
			return {
				userName: [
					{
						required: true,
						message: this.$t('common.utils.no_empty'),
						trigger: 'blur'
					}
				],
				deskmateUserName: [
					{
						required: true,
						message: this.$t('common.utils.no_empty'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	watch: {
		$route: function(to, from) {
			if (to.path.indexOf(routerNames.partnerCardQuery) > -1) {
				this.getRouteQuery(true)
			}
		}
	},
	mounted() {
		this.getRouteQuery(this.$route.query?.userName)
	},
	methods: {
		// 请求
		getRouteQuery(isLoadData = false) {
			if (this.$route.query.userName) {
				Object.keys(this.ruleForm).forEach((key) => {
					this.ruleForm[key] = ''
				})
				this.queryTime = [
					dayjs(this.$route.query.startQueryTime) || start(),
					dayjs(this.$route.query.endQueryTime) || end()
				]
				this.ruleForm.userName = this.$route.query.userName || ''
				this.ruleForm.deskmateUserName =
					this.$route.query.deskmateUserName || ''
				this.$router.replace({ query: {} })
				if (isLoadData) {
					this.handleSearch()
				}
			}
		},
		getSearchParams() {
			const queryTime = this.queryTime || []
			const params = {
				...this.ruleForm,
				startTimestamp: queryTime[0]
					? dayjs(queryTime[0]).valueOf()
					: undefined,
				endTimestamp: queryTime[1]
					? dayjs(queryTime[1]).endOf('day').valueOf()
					: undefined
			}
			Object.keys(params).forEach((key) => {
				if (params[key] === '') {
					params[key] = undefined
				}
			})
			return params
		},
		getDataList() {
			this.loading = true
			this.detailData = {
				dataCount: {},
				dataList: []
			}
			this.params = this.getSearchParams()
			this.$api
				.getPartnerQueryListBend(this.params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.detailData = {
							dataCount: {
								challengeHandCount:
									res.data?.challengeHandCount || 0, // 单挑手牌数
								deskmateHandCount:
									res.data?.deskmateHandCount || 0, // 同桌手牌数
								deskmateTimeCount:
									res.data?.deskmateTimeCount || 0, // 同桌时长（min）
								sameHistoryDevice:
									res.data?.sameHistoryDevice || 0, // 历史相同设备 0 不存在 1 存在
								sameHistoryIp: res.data?.sameHistoryIp || 0 // 历史相同IP 0 不存在 1 存在
							},
							dataList: res.data?.fineScreenDetailRespList || []
						}
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSearch() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					this.getDataList()
				}
			})
		},
		handleReset() {
			this.$refs.ruleForm.clearValidate()
			this.activeName = '1'
			this.queryTime = [start(), end()]
			Object.keys(this.ruleForm).forEach((key) => {
				this.ruleForm[key] = undefined
			})
			this.params = this.getSearchParams()
			this.detailData = {
				dataCount: {},
				dataList: []
			}
		},
		handleExport() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					const api = this.exportApiMap.get(this.activeName)
					if (!api) {
						return this.$message.warning('导出接口获取失败')
					}
					const params = this.getSearchParams()
					this.exportLoading = true
					this.exportExcelPublic({
						api,
						params
					}).finally(() => {
						this.exportLoading = false
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.rule-form {
	margin: 15px 30px;
	.status-lable {
		line-height: 1.2;
	}
}
</style>
